/**
 * Created by HZH
 * Date-Time: 2022-01-26
 */

import React, { useState } from 'react';
import { Row, Col, Card } from 'antd';
import {
  DeviceStatistics,
  TheTable,
  ChartGauge,
  ChartLineSmooth,
  ChartPie,
  ChartProgress,
  ChartRing,
} from '@/components';
import { TopHeader, WarningInfoStatic } from './components';
import styles from './index.less';
import mapImg from './map.jpg';
import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';

const alarmTabList = [
  {
    key: 'alarm',
    tab: '报警类型分部',
  },
  {
    key: 'warm',
    tab: '预警类型分部',
  },
];

const data1 = [
  { name: '学校', value: 93 },
  { name: '医院', value: 32 },
  { name: '生产制造', value: 65 },
  { name: '公共设施', value: 44 },
  { name: '商业建筑', value: 52 },
];

const columns = [
  {
    title: '项目',
    dataIndex: 'name',
  },
  {
    title: '地点',
    dataIndex: 'local',
  },
  {
    title: '设备别名',
    dataIndex: 'alias',
  },
  {
    title: '线路',
    dataIndex: 'path',
  },
  {
    title: '报警类型',
    dataIndex: 'type',
  },
  {
    title: '报警时间',
    dataIndex: 'time',
    valueType: 'dateTime',
  },
  {
    title: '进度',
    dataIndex: 'progress',
  },
  {
    title: '耗时',
    dataIndex: 'timeUse',
  },
  {
    title: '状态',
    dataIndex: 'status',
  },
];

const dataSource = [
  {
    id: '0',
    name: '名称',
    local: '铁塔江门',
    alias: '2422222',
    path: '节点1',
    type: '温度上限报警',
    progress: '10%',
    timeUse: '2.5小时',
    time: new Date(),
    status: '未处理',
  },
  {
    id: '1',
    name: '名称',
    local: '铁塔江门',
    alias: '2422222',
    path: '节点1',
    type: '温度上限报警',
    progress: '10%',
    timeUse: '2.5小时',
    time: new Date(),
    status: '未处理',
  },
  {
    id: '2',
    name: '名称',
    local: '铁塔江门',
    alias: '2422222',
    path: '节点1',
    type: '温度上限报警',
    progress: '10%',
    timeUse: '2.5小时',
    time: new Date(),
    status: '未处理',
  },
  {
    id: '3',
    name: '名称',
    local: '铁塔江门',
    alias: '2422222',
    path: '节点1',
    type: '温度上限报警',
    progress: '10%',
    timeUse: '2.5小时',
    time: new Date(),
    status: '未处理',
  },
  {
    id: '4',
    name: '名称',
    local: '铁塔江门',
    alias: '2422222',
    path: '节点1',
    type: '温度上限报警',
    progress: '10%',
    timeUse: '2.5小时',
    time: new Date(),
    status: '未处理',
  },
  {
    id: '5',
    name: '名称',
    local: '铁塔江门',
    alias: '2422222',
    path: '节点1',
    type: '温度上限报警',
    progress: '10%',
    timeUse: '2.5小时',
    time: new Date(),
    status: '未处理',
  },
];

export default () => {
  const [activeTabKey, setActiveTabKey] = useState('alarm');
  const [ringData, setRingData] = useState(data1);
  const warningData = [
    {
      label: '报警数',
      value: 836,
      status: '0',
    },
    {
      label: '未处理',
      value: 836,
      status: '1',
    },
    {
      label: '已处理',
      value: 0,
      status: '2',
    },
  ];
  const warningLine = [];

  const onTabChange = (key) => {
    setActiveTabKey(key);
    setRingData([]);
    setTimeout(() => {
      setRingData(data1);
    }, 300);
  };

  return (
    <div className={styles.homeBox}>
      <TopHeader />
      <Row gutter={[12, 12]} className={styles.homeRow}>
        <Col span={5}>
          <Card title="行业报警统计占比">
            <ChartPie height="240px" data={data1} />
          </Card>
          <Card title="警情信息处理情况(月度)" className={styles.gutter}>
            <ChartProgress height="240px" value={30} />
            <WarningInfoStatic data={warningData} />
          </Card>
        </Col>
        <Col span={14}>
          <Card title="设备统计与分部">
            <DeviceStatistics />
            <img src={mapImg} style={{ width: '100%' }} />
          </Card>
        </Col>
        <Col span={5}>
          <Card title="最近2天警情同比">
            <Row gutter={[5, 5]} align="middle">
              <Col span={9}>
                <ChartGauge height="160px" title="今日报警" value={70} />
              </Col>
              <Col span={9}>
                <ChartGauge height="160px" title="昨日报警" value={60} />
              </Col>
              <Col span={6}>
                <div>
                  10% <ArrowDownOutlined />
                </div>
                <div>同比</div>
              </Col>
            </Row>
            <Row gutter={[5, 5]} align="middle">
              <Col span={9}>
                <ChartGauge height="160px" title="今日预警" value={40} />
              </Col>
              <Col span={9}>
                <ChartGauge height="160px" title="昨日预警" value={30} />
              </Col>
              <Col span={6}>
                <div>
                  10% <ArrowUpOutlined />
                </div>
                <div>同比</div>
              </Col>
            </Row>
          </Card>
          <Card
            title="行业报警统计占比"
            className={styles.gutter}
            tabList={alarmTabList}
            onTabChange={onTabChange}
            activeTabKey={activeTabKey}
          >
            <ChartRing height="240px" data={ringData} />
          </Card>
        </Col>
        <Col span={19}>
          <Card title="实时报警列表">
            <TheTable
              search={false}
              columns={columns}
              rowKey="id"
              dataSource={dataSource}
              pagination={false}
            />
          </Card>
        </Col>
        <Col span={5}>
          <Card title="报警预警趋势">
            <ChartLineSmooth height="240px" data={ringData} />
          </Card>
        </Col>
      </Row>
    </div>
  );
};
